<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery Accordion Demo</title>
		<link rel="stylesheet" href="acrodin_files/highlight.css" type="text/css">
		<link rel="stylesheet" href="acrodin_files/demo.css" type="text/css">
		<!-- jquery core -->
		<script type="text/javascript" src="acrodin_files/jquery-1.js"></script>
		<!-- jquery plugins -->
		<script type="text/javascript" src="acrodin_files/jquery.js"></script>
		<script type="text/javascript" src="acrodin_files/jquery_002.js"></script>
		<script type="text/javascript" src="acrodin_files/highlight.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				//syntax highlighter
				hljs.tabReplace = '    ';
				hljs.initHighlightingOnLoad();

				//accordion
				$('h3.accordion').accordion({
					defaultOpen: 'section1',
					cookieName: 'accordion_nav',
					speed: 'slow',
					animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
						elem.next().slideFadeToggle(opts.speed);
					},
					animateClose: function (elem, opts) { //replace the standard slideDown with custom function
						elem.next().slideFadeToggle(opts.speed);
					}
				});
	
				$('h3.accordion2').accordion({
					defaultOpen: 'sample-1',
					cookieName: 'accordion2_nav',
					speed: 'slow',
					cssClose: 'accordion2-close', //class you want to assign to a closed accordion header
					cssOpen: 'accordion2-open',
					
				});

				//custom animation for open/close
				$.fn.slideFadeToggle = function(speed, easing, callback) {
					return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
				};

			});
		</script>
		<style type="text/css">
			#body {width:90%}
		</style>

	</head>
	<body>
		<h1>jQuery Accordion Plugin Demo/FAQ</h1>
		<div id="body">
			<div id="accordion">
				<!-- panel -->
				<h3 class="accordion accordion-open" id="body-section1">Overview<span></span></h3>
				<div style="display: block;" class="container">
					<div class="content">
						<p>
							This plugin enables an accordion that can use cookies to persist between pages or visits.
							This plugin works with the latest jQuery release 1.5.
						</p>
						<p>
							If you find any errors or have suggested changes, please post a comment on the
							github project: <a href="http://github.com/juven14/Accordion" title="jQuery Accordion">http://github.com/juven14/Accordion</a>
						</p>
					</div>
				</div>
				<!-- end panel -->
				<!-- panel -->
				<h3 class="accordion accordion-close" id="body-section2">Add HTML<span></span></h3>
				<div style="display: none;" class="container">
					<div class="content">
						<p>
							You have to create your own html for the accordion. You need a header element
							(here as h3, can be div or etc) that gets the "accordion" class assigned and a
							body element. However, the slide effect will be choppy if you have margins and
							padding for the container, so here I just use a div. I've used
							"accordion" but you can choose any other selector, also i have added classes to
							aid with styling, and the containers do not have to have these class
							names. Note that there is a slight jump on some panels due to the way jQuery handles
							slideUp and slideDown, see the custom javascript panel below for better sliding.
							Here is an example:
						</p>
						<pre><code data-second_best="[object Object]" data-result="[object Object]" class="html"><span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span> <span class="attribute">class</span>=<span class="value">"accordion"</span> <span class="attribute">id</span>=<span class="value">"section1"</span>&gt;</span>Heading<span class="tag">&lt;<span class="title"><span class="keyword">span</span></span>&gt;</span><span class="tag">&lt;/<span class="title"><span class="keyword">span</span></span>&gt;</span><span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span>&gt;</span>
<span class="tag">&lt;<span class="title"><span class="keyword">div</span></span> <span class="attribute">class</span>=<span class="value">"container"</span>&gt;</span>
    <span class="tag">&lt;<span class="title"><span class="keyword">div</span></span> <span class="attribute">class</span>=<span class="value">"content"</span>&gt;</span>
        <span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span>&gt;</span>Sample Content<span class="tag">&lt;/<span class="title"><span class="keyword">h3</span></span>&gt;</span>
        <span class="tag">&lt;<span class="title"><span class="keyword">p</span></span>&gt;</span>Content here....<span class="tag">&lt;/<span class="title"><span class="keyword">p</span></span>&gt;</span>
    <span class="tag">&lt;/<span class="title"><span class="keyword">div</span></span>&gt;</span>
<span class="tag">&lt;/<span class="title"><span class="keyword">div</span></span>&gt;</span>
<span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span> <span class="attribute">class</span>=<span class="value">"accordion"</span> <span class="attribute">id</span>=<span class="value">"section2"</span>&gt;</span>Heading<span class="tag">&lt;<span class="title"><span class="keyword">span</span></span>&gt;</span><span class="tag">&lt;/<span class="title"><span class="keyword">span</span></span>&gt;</span><span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span>&gt;</span>
<span class="tag">&lt;<span class="title"><span class="keyword">div</span></span> <span class="attribute">class</span>=<span class="value">"container"</span>&gt;</span>
    <span class="tag">&lt;<span class="title"><span class="keyword">div</span></span> <span class="attribute">class</span>=<span class="value">"content"</span>&gt;</span>
        <span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span>&gt;</span>Sample Content<span class="tag">&lt;/<span class="title"><span class="keyword">h3</span></span>&gt;</span>
        <span class="tag">&lt;<span class="title"><span class="keyword">p</span></span>&gt;</span>Content here....<span class="tag">&lt;/<span class="title"><span class="keyword">p</span></span>&gt;</span>
    <span class="tag">&lt;/<span class="title"><span class="keyword">div</span></span>&gt;</span>
<span class="tag">&lt;/<span class="title"><span class="keyword">div</span></span>&gt;</span>
<span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span> <span class="attribute">class</span>=<span class="value">"accordion"</span> <span class="attribute">id</span>=<span class="value">"section3"</span>&gt;</span>Heading<span class="tag">&lt;<span class="title"><span class="keyword">span</span></span>&gt;</span><span class="tag">&lt;/<span class="title"><span class="keyword">span</span></span>&gt;</span><span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span>&gt;</span>
<span class="tag">&lt;<span class="title"><span class="keyword">div</span></span> <span class="attribute">class</span>=<span class="value">"container"</span>&gt;</span>
    <span class="tag">&lt;<span class="title"><span class="keyword">div</span></span> <span class="attribute">class</span>=<span class="value">"content"</span>&gt;</span>
        <span class="tag">&lt;<span class="title"><span class="keyword">h3</span></span>&gt;</span>Sample Content<span class="tag">&lt;/<span class="title"><span class="keyword">h3</span></span>&gt;</span>
        <span class="tag">&lt;<span class="title"><span class="keyword">p</span></span>&gt;</span>Content here....<span class="tag">&lt;/<span class="title"><span class="keyword">p</span></span>&gt;</span>
    <span class="tag">&lt;/<span class="title"><span class="keyword">div</span></span>&gt;</span>
<span class="tag">&lt;/<span class="title"><span class="keyword">div</span></span>&gt;</span>
</code></pre>
					</div>
				</div>
				<!-- end panel -->
				<!-- panel -->
				<h3 class="accordion accordion-close" id="body-section3">Add the Javascript<span></span></h3>
				<div style="display: none;" class="container">
					<div class="content">
						<p>
							JavaScript which belongs in the head of the html document, using the
							cookie plugin is optional.	Please note that our default open / config is only
							an example.
						</p>
						<pre class="javascript"><code data-second_best="[object Object]" data-result="[object Object]" class="xml"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"javascript/jquery.cookie.js"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"javascript/jquery.accordion.js"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span>
    $(document).ready(function() {
        $('.accordion').accordion({defaultOpen: 'some_id'});
    });
<span class="tag">&lt;/<span class="title">script</span>&gt;</span>
</code></pre>
					</div>
				</div>
				<!-- end panel -->
				<!-- panel -->
				<h3 class="accordion accordion-close" id="body-section4">Default Options<span></span></h3>
				<div style="display: none;" class="container">
					<div class="content">
						<p>The plugin default options are as follows:</p>
						<pre class="javascript"><code data-result="[object Object]" class="php">{
    cssClose: <span class="string">'accordion-close'</span>, <span class="comment">//class you want to assign to a closed accordion header</span>
    cssOpen: <span class="string">'accordion-open'</span>, <span class="comment">//class you want to assign an opened accordion header</span>
    cookieName: <span class="string">'accordion'</span>, <span class="comment">//name of the cookie you want to set for this accordion</span>
    cookieOptions: { <span class="comment">//cookie options, see cookie plugin for details</span>
        path: <span class="string">'/'</span>,
        expires: <span class="number">7</span>,
        domain: <span class="string">''</span>,
        secure: <span class="string">''</span>
    },
    defaultOpen: <span class="string">''</span>, <span class="comment">//id that you want opened by default</span>
    speed: <span class="string">'slow'</span>, <span class="comment">//speed of the slide effect</span>
    bind: <span class="string">'click'</span>, <span class="comment">//event to bind to, supports click, dblclick, mouseover and mouseenter</span>
    animateOpen: <span class="keyword">function</span> (elem, opts) { <span class="comment">//replace the standard slideDown with custom function</span>
        elem.next().slideDown(opts.speed);
    },
    animateClose: <span class="keyword">function</span> (elem, opts) { <span class="comment">//replace the standard slideUp with custom function</span>
        elem.next().slideUp(opts.speed);
    }
}
</code></pre>
						<h3>Details</h3>
						<ul>
							<li>cssClose - class assigned when closed</li>
							<li>cssOpen - class assigned when opened</li>
							<li>cookieName - cookie name for persisting panels</li>
							<li>cookieOptions - see jquery.cookie plugin for more info</li>
							<li>defaultOpen - id that you want opened by default</li>
							<li>speed - animation speed</li>
							<li>bind - event that triggers the collapsible, only
								4 are supported:<br> click, dblclick, mouseenter, and mouseover</li>
							<li>animateOpen - custom callback to animate opening</li>
							<li>animateClose - custom callback to animate closing</li>
						</ul>
					</div>
				</div>
				<!-- end panel -->
				<!-- panel -->
				<h3 class="accordion accordion-close" id="body-section6">Custom CSS<span></span></h3>
				<div style="display: none;" class="container">
					<div class="content">
						<p>
							In the above example HTML you will see a span, this is useful if you wish to
							assign an open/close image.
						</p>
						<p>
							This plugin will append a user defined (or default, see options above) class to
							header of the accordion.  You can use this to swap out the images or style
							the different states of your accordion.
						</p>
						<pre class="css"><code data-result="[object Object]" class="">.accordion h3.collapse-open {}
.accordion h3.collapse-close {}
.accordion h3.collapse-open span {}
.accordion h3.collapse-close span {}
</code></pre>
					</div>
				</div>
				<!-- end panel -->
				<!-- panel -->
				<h3 class="accordion accordion-close" id="body_section7">Custom Javascript<span></span></h3>
				<div style="display: none;" class="container">
					<div class="content">
						<p>You can additionally add in custom animation functions such as below:</p>
						<pre><code data-result="[object Object]" class="php">$(document).ready(<span class="keyword">function</span>() {

    <span class="comment">//custom animation for open/close</span>
    $.fn.slideFadeToggle = <span class="keyword">function</span>(speed, easing, callback) {
        <span class="keyword">return</span> <span class="keyword">this</span>.animate({opacity: <span class="string">'toggle'</span>, height: <span class="string">'toggle'</span>}, speed, easing, callback);
    };

    $(<span class="string">'.accordion'</span>).accordion({
        defaultOpen: <span class="string">'section1'</span>,
        cookieName: <span class="string">'nav'</span>,
        speed: <span class="string">'slow'</span>,
        animateOpen: <span class="keyword">function</span> (elem, opts) { <span class="comment">//replace the standard slideUp with custom function</span>
            elem.next().slideFadeToggle(opts.speed);
        },
        animateClose: <span class="keyword">function</span> (elem, opts) { <span class="comment">//replace the standard slideDown with custom function</span>
            elem.next().slideFadeToggle(opts.speed);
        }
    });
});
</code></pre>
					</div>
				</div>
				<!-- end panel -->
				<!-- panel -->
				<h3 class="accordion accordion-close" id="body-section8">Demo CSS<span></span></h3>
				<div style="display: none;" class="container">
					<div class="content">
						<pre class="css"><code data-result="[object Object]" class="php">@CHARSET <span class="string">"UTF-8"</span>;
<span class="comment">#left_nav {</span>
    width:<span class="number">250</span>px; }
<span class="comment">#body {</span>
    width:<span class="number">700</span>px; }
<span class="comment">#left_nav,</span>
<span class="comment">#body {</span>
    float:left;
    margin:<span class="number">10</span>px; }
.collapsible,
.page_collapsible,
.accordion {
    margin: <span class="number">0</span>;
    padding:<span class="number">10</span>px;
    height:<span class="number">20</span>px;
    border-top:<span class="comment">#f0f0f0 1px solid;</span>
    background: <span class="comment">#cccccc;</span>
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: <span class="comment">#000;</span>
    font-size:<span class="number">1</span>em; }
.accordion-open,
.collapse-open {
    background:<span class="comment">#000;</span>
    color: <span class="comment">#fff; }</span>
.accordion-open span,
.collapse-open span {
    display:block;
    float:right;
    padding:<span class="number">10</span>px; }
.accordion-open span,
.collapse-open span {
    background:url(../images/minus.png) center center no-repeat; }
.accordion-close span,
.collapse-close span {
    display:block;
    float:right;
    background:url(../images/plus.png) center center no-repeat;
    padding:<span class="number">10</span>px; }
div.container {
    padding:<span class="number">0</span>;
    margin:<span class="number">0</span>; }
div.content {
    background:<span class="comment">#f0f0f0;</span>
    margin: <span class="number">0</span>;
    padding:<span class="number">10</span>px;
    font-size:.<span class="number">9</span>em;
    line-height:<span class="number">1.5</span>em;
    font-family:<span class="string">"Helvetica Neue"</span>, Arial, Helvetica, Geneva, sans-serif; }
div.content ul, div.content p {
    padding:<span class="number">0</span>;
    margin:<span class="number">0</span>;
    padding:<span class="number">3</span>px; }
div.content ul li {
    <span class="keyword">list</span>-style-position:inside;
    line-height:<span class="number">25</span>px; }
div.content ul li a {
    color:<span class="comment">#555555; }</span>
code {
    overflow:auto; }
</code></pre>
					</div>
				</div>
				<!-- end panel -->
			</div>
			<div id="accordion2">
				<h1>Second Sample Accordion</h1>
				<!-- panel -->
				<h3 class="accordion2 accordion2-close" id="sample-1">Panel 1<span></span></h3>
				<div style="display: none;" class="container2">
					<div class="content">
						<p>
							Sample Panel 1
						</p>
					</div>
				</div>
				<h3 class="accordion2 accordion2-close" id="sample-2">Panel 2<span></span></h3>
				<div style="display: none;" class="container2">
					<div class="content">
						<p>
							Sample Panel 1
						</p>
					</div>
				</div>
				<h3 class="accordion2 accordion2-close" id="sample-3">Panel 3<span></span></h3>
				<div style="display: none;" class="container2">
					<div class="content">
						<p>
							Sample Panel 1
						</p>
					</div>
				</div>
			</div>
		</div>
	
</body></html>